<template>
    <transition name="fade">
        <div class="form-modal-wrap">
            <transition name="slideUp">
                <div :style="{'width':rWidth,top: topPx+'px'}" class="form-modal">
                    <img class='modal-close' src='../assets/images/icon_close.png' @click.stop='closeModal()'>
                    <div class="modal-header"><h4>{{title}}</h4></div>
                    <div class="modal-body">
                        <slot></slot>
                    </div>
                    <div class="modal-footer"><slot name="footer"></slot></div>
                </div>
            </transition>
        </div>
    </transition>
</template>
<script>
export default {
    name: "formPopModal",
    props:{
        title:{//标题内容
            type:String,
            default:'添加用户',
        },
        width:{
            type:[Number, String],
            default:"96%"
        },
    },
    watch:{
        title(newV,oldV){
            if(newV!=""){
                this.watchTopPx()
            }
        }
    },
    computed:{
        rWidth(){
            if(typeof(this.width)=="number"){
                return this.width+"px";
            }else{
                return this.width;
            }
        }
    },
    data(){
        return{
             topPx:100,
        }
    },
    methods:{
        closeModal(){
            this.$emit("closeModal");
        },
        watchTopPx(){
            setTimeout(() => {
                let diffHeight = this.$el.clientHeight-this.$el.children[0].clientHeight;
                if(diffHeight<0) diffHeight=0;
                else {
                    diffHeight = diffHeight/2;
                }
                if(diffHeight>50) diffHeight=50;
                this.topPx = diffHeight;
            }, 100);
        }
    },
    
}
</script>
